<template>
    <div class="vprops">
        <h2>props</h2>
        <div class="hr"></div>
        <el-tag
            effect="dark"
            >
            作用
        </el-tag>
        <p class="decr">
            用于在子组件接收来自于父组件传递的数据。<br>
            可以是数组或者对象类型。<br>
            用于父子组件的通信。
        </p>
        <div class="hr"></div>
        <el-tag
            effect="dark"
            >
            使用步骤
        </el-tag>
        <p class="decr">
            1. 在子组件标签中绑定属性和值，比如:val="'hello666'"。<br>
            2. 在子组件中接收数据，比如props: [...]或props: {...}<br>
            接收传值时，使用[]还是{}，一般要看是简单接收，还是使用配置项接收。<br>
            如果是简单接收，就可以用props: [...]<br>
            如果是带配置项的形式接收，就用props: {...}<br>
            具体可以参考VpropsSonComp.vue组件中的写法。
        </p>
        <div class="hr"></div>
        <el-tag
            effect="dark"
            >
            高级配置项
        </el-tag>
        <p class="decr">
            可在/src/VueDemoPages/VpropsSonComp.vue组件中查看配置项示例代码
        </p>
        <div class="hr"></div>
        <el-tag
            effect="dark"
            >
            Demo
        </el-tag>
        <!-- 通过:val="'hello666'"的形式，把字符串'hello666'传递给VpropsSonComp子组件 -->
        <VpropsSonComp :val="'hello666'"></VpropsSonComp>
        <div class="hr"></div>
        <el-tag
            effect="dark"
            type="success"
            >
            <a :href="getHref" target="_blank">查看示例代码</a>
        </el-tag>
    </div>
</template>

<script>
import mixinPage from './mixin-page';
import VpropsSonComp from './VpropsSonComp';

export default {
    name: 'Vprops',
    components: {VpropsSonComp},
    mixins: [mixinPage],
}
</script>

<style lang="less" scoped>
@import '../assets/css/mixin-frame.less';
</style>